<template>
	<view>
		<view style="background: url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/e63bcf73858e37c567847ca55821ddfa.png) no-repeat;background-size: 100%;width: 100%;height: 414rpx;">
			
		</view>
		<view style="width: 92%;position: absolute;top:10rpx;left: 4%;padding-bottom: 30rpx;">
			<gpp-date-picker @onCancel="onCancel" @onConfirm="onConfirm" :startDate="startDate" :endDate="endDate" :defaultValue="pickerDate">
				<view style="width:100%;height: 80rpx;line-height: 80rpx;text-align: center;color: #FFFFFF;font-size: 26rpx;border-radius: 40rpx;background-color: rgba(255,255,255,.3);position: relative;">
					<view style="width: 280rpx;height: 80rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
						<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/%E5%9B%BE%E5%B1%82%2017%402x.png" style="width: 40rpx;height: 40rpx;float: left;margin-top: 20rpx;margin-right: 20rpx;"  mode=""></image><text style="float: left;">{{pickerDate}}</text>
					</view>
					
				</view>
			</gpp-date-picker>
			
			<view style="margin-top: 30rpx;">
				<view style="width: 100%;box-sizing: border-box;padding: 30rpx;background-color: #FFFFFF;border-radius: 16rpx;margin-bottom: 20rpx;" v-for="(item,index) in 3" :key='index'>
					<view style="overflow: hidden;">
						<view style="width: 18%;float: left;overflow: hidden;">
							<image src="../../../static/logo.png" style="width: 92rpx;height: 92rpx;border-radius: 50%;display: block;" mode=""></image>
						</view>
						<view style="width: 82%;float: left;padding: 6rpx 0;">
							<view style="height: 40rpx;line-height: 40rpx;">
								<text style="color: #000000;font-size: 30rpx;display: inline-block;font-weight: 600;float: left;">金煌</text>
								<image src="../../../static/logo.png" style="width: 32rpx;height: 20rpx;float: left;margin-top: 10rpx;margin-left: 20rpx;" mode=""></image>
								<text style="color: #999999;font-size: 20rpx;float: left;margin-left: 20rpx;">(厄瓜多尔)</text>
								<text style="color: #999999;font-size: 24rpx;float: right;">最新</text>
							</view>
							<view style="height: 40rpx;line-height: 40rpx;color: #010101;font-size: 24rpx;" class="yihang">
								Omarsa <text style="float: right;color: #999999;font-size: 24rpx;">发布于 2022-03-05 14:51</text>
							</view>
						</view>
					</view>
					<view style="color: #010101;font-size: 26rpx;margin-top: 20rpx;line-height: 40rpx;">
						20/30. 7.81<br/>
						30/40  6.61<br/>
						40/50  6.21<br/>
						50/60  5.91<br/>
						60/70  5.51<br/>
						70/80. 5.31<br/>
						盐冻Brine bulk +0.10<br/>
						盐冻Brine 1.5  +0.20<br/>
						盐冻Brine 1.65 + 0.30<br/>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import gppDatePicker from "../../../components/gpp-datePicker.vue"
	export default{
		components:{
			gppDatePicker
		},
		data(){
			return{
				startDate: "2018-05-02",
				endDate: "2022-04-01",
				pickerDate: '2022-04-01'
			}
		},
		methods: {
			onCancel(e){
				console.log(e);
			},
			onConfirm(e){
				this.pickerDate = e.dateValue;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F8F8F8!important;
		padding-bottom: 30rpx;
		font-family: Demibold;
	}
</style>
